<template>
  <div class="axios">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import axios from "axios";
/*
 get post
*/
export default {
  name: "MultiAxios",
  props: {
    msg: String
  },
  components: {},
  created() {
    //   http://localhost:8080/data.json?id=12

    let host1axios = axios.create({
      baseURL: "http://localhost:8080",
      timeout: 1000
    });

    let host2axios = axios.create({
      baseURL: "https://cupb.top",
      timeout: 1000
    });

    host1axios.get("/data.json", {
        params: {
          id: 12
        }
      })
      .then(res => {
        console.info(res);
      });

    host1axios({
      method: "get",
      url: "/data.json",
      params: {
        id: 11
      }
    }).then(res => {
      console.info(res);
    });

    // form-data表单提交（文件上传）
    // application/json提交数据。
    let data = {
      phone: 18010472947,
      password:'Sigh,0404'
    };
    host2axios.post("/user/loginv", data).then(res => {
      console.info(res);
    });

    host2axios({
      method: "post",
      url: "/post",
      params: data
    }).then(res => {
      console.info(res);
    });

    // form-data请求
    let formData = new FormData();
    for (let key in data) {
      formData.append(key, data[key]);
    }

    axios.post("/post", formData).then(res => {
      console.log(res);
    });

    //  处理并发请求，同时1请求后端的多个接口
    axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
      axios.spread((dataRes, cityRes) => {
        console.info(dataRes, cityRes);
      })
    );
  }
};
</script>